<template>
  <!-- 手机号登录 -->
  <div class="login-box">
    <!-- 顶部按钮 -->
    <div class="t-btn">
      <div
        class="phone"
        @click="showPhoneLogin"
        :class="phoneLogin ? 'is-active' : ''"
      >
        手机号注册
      </div>
      <div
        class="email"
        @click="showEmailLogin"
        :class="phoneLogin ? '' : 'is-active'"
      >
        邮箱注册
      </div>
    </div>
    <!-- 选择个人注册/旅行社注册 -->
    <!-- <div class="radio">
      <el-radio v-model="radio" label="personal" @change="radioChange(radio)"
        >个人</el-radio
      >
      <el-radio v-model="radio" label="agency" @change="radioChange(radio)"
        >旅行社</el-radio
      >
    </div> -->
    <!-- 手机号注册 -->
    <div v-if="phoneLogin">
      <!-- 表单 -->
      <div class="form">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="phoneRules">
          <el-form-item prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item prop="phonePassword">
            <el-input
              v-model="ruleForm.phonePassword"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item prop="phonePasswordConfirm">
            <el-input
              v-model="ruleForm.phonePasswordConfirm"
              placeholder="请再次确认密码"
            />
          </el-form-item>
          <el-form-item prop="phoneVeriCode">
            <el-input
              v-model="ruleForm.phoneVeriCode"
              placeholder="请输入验证码"
            >
              <template #suffix>
                <code-button
                  slot="suffix"
                  :phone="ruleForm.phone"
                  @change-code="changeCode"
                  :waitTime="waitTime"
                  >获取验证码</code-button
                >
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 单选框和忘记密码 -->
      <div class="check-and-forget">
        <div class="check">
          <el-checkbox v-model="checked"></el-checkbox>
          <div class="agree">
            阅读并同意<a href="">服务协议</a>和<a href="">隐私协议</a>
          </div>
        </div>
      </div>
      <!--  注册按钮  -->
      <div class="register">
        <button @click="submitForm(ruleFormRef)">注册</button>
      </div>
      <div class="to-register">
        <span @click="toLogin">已经有账号 ？去登录 !</span>
      </div>
    </div>
    <!-- 邮箱注册 -->
    <div v-else>
      <!-- 表单 -->
      <div class="form">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="emailRules">
          <el-form-item prop="eamil">
            <el-input v-model="ruleForm.email" placeholder="请输入邮箱账号" />
          </el-form-item>
          <el-form-item prop="emailPassword">
            <el-input
              v-model="ruleForm.emailPassword"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item prop="emailPasswordConfirm">
            <el-input
              v-model="ruleForm.emailPasswordConfirm"
              placeholder="请再次确认密码"
            />
          </el-form-item>
          <el-form-item prop="emailVeriCode">
            <el-input
              v-model="ruleForm.emailVeriCode"
              placeholder="请输入验证码"
            >
              <template #suffix>
                <code-button
                  slot="suffix"
                  :phone="ruleForm.phone"
                  @change-code="changeCode"
                  :waitTime="waitTime"
                  >获取验证码</code-button
                >
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 单选框和忘记密码 -->
      <div class="check-and-forget">
        <div class="check">
          <el-checkbox v-model="checked"></el-checkbox>
          <div class="agree">
            阅读并同意<a href="">服务协议</a>和<a href="">隐私协议</a>
          </div>
        </div>
      </div>
      <!--  注册按钮  -->
      <div class="register">
        <button @click="submitForm(ruleFormRef)">注册</button>
      </div>
      <div class="to-register">
        <span @click="toLogin">已经有账号 ？去登录 !</span>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, ref, defineAsyncComponent, watch } from "vue";
import { useRouter } from "vue-router";
export default {
  components: {
    codeButton: defineAsyncComponent(() =>
      import("@/components/util/codeButton.vue")
    ),
  },
  setup() {
    const ruleFormRef = ref(null);
    const router = useRouter();
    // radio
    const radio = ref("");
    // 等待获取验证码
    let waitTime = ref(false);
    let phoneLogin = ref(true);
    // 手机号注册
    const showPhoneLogin = () => {
      phoneLogin.value = true;
    };
    // 邮箱注册
    const showEmailLogin = () => {
      phoneLogin.value = false;
      // router.push({
      //   path: "./agencyRegister",
      // });
    };
    // radio改变触发
    const radioChange = (type) => {
      console.log("radioChange-->", type);
    };
    // 去登录
    const toLogin = () => {
      router.push({
        path: "./login",
      });
    };
    const changeCode = (e) => {
      if (!e) {
      }
    };
    const checked = ref(false);
    const ruleForm = reactive({
      phone: undefined,
      phonePassword: undefined,
      phonePasswordConfirm: undefined,
      phoneVeriCode: undefined,
      email: undefined,
      emailPassword: undefined,
      emailPasswordConfirm: undefined,
      emailVeriCode: undefined,
    });
    // watch(() => ruleForm.phone, (newVal, oldVal) => {
    //   if (newVal) {
    //     console.log(newVal);
    //   }
    // })
    // 手机号注册校验规则
    const phoneRules = reactive({
      phone: [],
      phonePassword: [],
      phonePasswordConfirm: [],
      phoneVeriCode: [],
    });
    // 邮箱账号注册校验规则
    const emailRules = reactive({
      email: [],
      emailPassword: [],
      emailPasswordConfirm: [],
      emailVeriCode: [],
    });
    // 提交表单
    const submitForm = async (ruleFormRef) => {
      console.log(ruleFormRef);
    };
    return {
      phoneRules,
      emailRules,
      ruleForm,
      ruleFormRef,
      submitForm,
      checked,
      phoneLogin,
      showPhoneLogin,
      showEmailLogin,
      toLogin,
      changeCode,
      waitTime,
      radio,
      radioChange,
    };
  },
};
</script>

<style lang="less">
@import url("./register.less");
</style>
<route lang="yaml">
meta:
  level: 1
  name: "Register"
  str: "注册"
  layout: loginLayout
</route>
